<template>
  <div class="medical-services">
    <div class="search">
      <el-form :inline="true" label-position="right" :model="formData" :rules="rules" ref="validateForm">
        <div class="line">
          <el-form-item label="项目编码">
            <el-input placeholder="请输入项目编码" v-model="formData.itemCode" clearable></el-input>
          </el-form-item>
          <el-form-item label="物价编码">
            <el-input placeholder="请输入物价编码" v-model="formData.pricCode" clearable></el-input>
          </el-form-item>
          <el-form-item label="项目名称">
            <el-input placeholder="请输入项目名称" v-model="formData.itemName" clearable></el-input>
          </el-form-item>
        </div>
        <div class="line">
          <el-form-item label="政策发布时间">
            <el-date-picker
              name="pub-time"
              v-model="formData.pubTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="项目价格" class="content-pric" prop="endPric">
            <el-input
              v-model="formData.startPric"
              id="start-pric"
              type="number"
              placeholder="请输入"
              :title="formData.startPric.length>6?formData.startPric:''"
              clearable
            ></el-input> 元&nbsp;
            ——
            <el-input
              v-model="formData.endPric"
              prop="endPric"
              id="end-pric"
              type="number"
              placeholder="请输入"
              :title="formData.endPric.length>6?formData.endPric:''"
              clearable
            ></el-input> 元
          </el-form-item>
          <el-form-item label="医保类别">
            <el-select
              id="medical-type"
              v-model="formData.medinscat"
              placeholder="请选择医保类别"
              clearable
            >
              <el-option
                v-for="item in medinsCat"
                :key="item.dictCode"
                :label="item.dictValue"
                :value="item.dictCode"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="line">
          <el-form-item label="有效标志">
            <el-select
              id="effect-sign"
              v-model="formData.valiFlag"
              placeholder="请选择有效标志"
              clearable
            >
              <el-option
                v-for="item in valueFlag"
                :key="item.dictCode"
                :label="item.dictValue"
                :value="item.dictCode"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="confirm-reset">
            <el-button class="reset" @click="resetClick">重置</el-button>
            <el-button type="primary" class="confirm" @click="searchClick">查询</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="table-list">
      <div class="title-content">
        <div class="title">北京诊疗服务项目分析</div>
        <el-button type="primary" class="export" @click="exportClick">导出</el-button>
      </div>
      <div class="table-content">
        <!-- :default-sort='{prop:"projectPrice",order:"ascending"}' 默认排序写法 -->
        <el-table :data="tableData.list" border style="width: 100%;"
        @sort-change="tableSortChange"
        v-loading="loading"
        row-key="id"
        max-height="550"
        :tree-props="{children: 'child'}"
        >
          <el-table-column
            v-for="item of tableData.header"
            :key="item.engColName"
            :prop="item.engColName"
            :label="item.chnColName"
            :sortable="item.sort==1?'custom':false"
            :width="item.engColName=='polFileName'?280:180"
            align="center"
          >
            <template slot-scope="scope">
              <span v-if="item.engColName=='polFileName'">{{ scope.row[item.engColName] | filterRow16 }}</span>
              <span v-else>{{ scope.row[item.engColName] }}</span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100"
            align="center">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="operationRow(scope.row.id)"
                type="text"
                style="width:100%"
                size="small">
                操作
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- <div class="pagination-content">
        <div class="total">共 {{tableData.totalDataCount}} 条&nbsp;显示{{startPage}}-{{endPage}}条</div>
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="10"
            layout="prev, pager, next, sizes"
            :total="tableData.totalDataCount">
          </el-pagination>
          <span>跳转至第&nbsp;&nbsp;</span><input type="text" v-model.number="jumpPage" @blur="blurJumpPage">&nbsp;&nbsp;页
        </div>
      </div> -->
      <pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.totalDataCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </pagination>
    </div>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination.vue"
import { 
  treatmentServDict, 
  treatmentServList 
  } from "@/api/index.js"
export default {
  components: {
    Pagination
  },
  data() {
    var validateEndPric = (rule, value, callback)=> {
      if(Number(value) <0) {
        callback(new Error('您输入的项目结束价格需要大于等于0哦~'));
      } else if(Number(this.formData.startPric)<0) {
        callback(new Error('您输入的项目初始价格需要大于等于0哦~'));
      } else if(value && Number(value) < Number(this.formData.startPric)) {
        callback(new Error('您输入的结束价格需要大于等于初始价格哦~'));
      } else {
        callback();
      }
    }
    return {
      formData: {
        itemCode: "",
        pricCode: "",
        itemName: "",
        pubTime: "",
        startPric: "",
        endPric: "",
        medinscat: "", //医保类别
        valiFlag: "", //有效标志
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      rules: {
        endPric: [
          {validator: validateEndPric, trigger: 'change'}
        ],
      },
      sort: "", //排序字段 按照field1 asc, field2 desc格式展示
      currentPage: 1,
      // jumpPage: 1,
      pageSize: 10, //每页展示条数
      loading: false,
      medinsCat: [
        // {
        //   dictCode: "1",
        //   dictValue: "甲类",
        // },
        // {
        //   dictCode: "2",
        //   dictValue: "乙类",
        // },
        // {
        //   dictCode: "3",
        //   dictValue: "丙类",
        // },
      ],
      valueFlag: [
        // {
        //   dictCode: "1",
        //   dictValue: "增补",
        // },
        // {
        //   dictCode: "2",
        //   dictValue: "废止",
        // },
      ],
      tableData: {
        // header:[
        //   {chnColName:"项目编码", engColName:"itemCode", sort:0},  //sort：0 非排序字段  1 需要排序的字段
        //   {chnColName:"物价编码", engColName:"pricCode", sort:0},
        //   {chnColName:"项目名称", engColName:"itemName", sort:0},
        //   {chnColName:"项目内容（内涵）", engColName:"itemCont", sort:0},
        //   {chnColName:"除外内容", engColName:"exctCont", sort:0},
        //   {chnColName:"计价单位", engColName:"prcunt", sort:0},
        //   {chnColName:"计价说明", engColName:"pricDscr", sort:0},
        //   {chnColName:"项目价格（元）", engColName:"itemPric", sort:1},
        //   {chnColName:"医保类别", engColName:"medinscat", sort:0},
        //   {chnColName:"工伤保险类别", engColName:"injrInsuType", sort:0},
        //   {chnColName:"有效标志", engColName:"valiFlag", sort:0},
        //   {chnColName:"政策文件编号", engColName:"polFileNo", sort:0},
        //   {chnColName:"政策文件名称", engColName:"polFileName", sort:0},
        //   {chnColName:"政策发布时间", engColName:"polFilePubdTime", sort:1},
        //   {chnColName:"备注", engColName:"memo", sort:0}
        // ],
        // list:[
        //   {
        //     id:1,
        //     itemCode:"项目编码123", 
        //     pricCode:"xxxx", 
        //     itemName:"xxxx", 
        //     itemCont:"xxxx", 
        //     exctCont:"xxxx", 
        //     prcunt:"xxxx", 
        //     pricDscr:"xxxx", 
        //     itemPric:"xxxx", 
        //     medinscat:"xxxx", 
        //     injrInsuType:"xxxx", 
        //     valiFlag:"xxxx", 
        //     polFileNo:"xxxx", 
        //     polFileName:"北京市是的医疗保障局北京市医疗保障局北京市医疗保障局北京市医疗保障局北京市医疗保障局北京市医疗保障局aadfaste", 
        //     polFilePubdTime:"xxxx", 
        //     memo:"xxxx",
        //     child: [{
        //       id:345,
        //       itemCode:"aaaa", 
        //       pricCode:"aaaa", 
        //       itemName:"aaaa", 
        //       itemCont:"aaaa", 
        //       exctCont:"aaaa", 
        //       prcunt:"aaaa", 
        //       pricDscr:"aaaa", 
        //       itemPric:"aaaa", 
        //       medinscat:"aaaa", 
        //       injrInsuType:"aaaa", 
        //       valiFlag:"aaaa", 
        //       polFileNo:"aaaa", 
        //       polFileName:"北京市是的医疗保障xxxxxxxxxxxxxxxxxx", 
        //       polFilePubdTime:"aaaa", 
        //       memo:"aaaa",
        //     },{
        //       id:897,
        //       itemCode:"aaaa", 
        //       pricCode:"aaaa", 
        //       itemName:"aaaa", 
        //       itemCont:"aaaa", 
        //       exctCont:"aaaa", 
        //       prcunt:"aaaa", 
        //       pricDscr:"aaaa", 
        //       itemPric:"aaaa", 
        //       medinscat:"aaaa", 
        //       injrInsuType:"aaaa", 
        //       valiFlag:"aaaa", 
        //       polFileNo:"aaaa", 
        //       polFileName:"xxxxxxxxxxxxxxx", 
        //       polFilePubdTime:"aaaa", 
        //       memo:"aaaa"
        //     }],
        //   },
        //   {
        //     id:432,
        //     itemCode:"bbb", 
        //     pricCode:"aaaa", 
        //     itemName:"aaaa", 
        //     itemCont:"aaaa", 
        //     exctCont:"aaaa", 
        //     prcunt:"aaaa", 
        //     pricDscr:"aaaa", 
        //     itemPric:"aaaa", 
        //     medinscat:"aaaa", 
        //     injrInsuType:"aaaa", 
        //     valiFlag:"aaaa", 
        //     polFileNo:"aaaa", 
        //     polFileName:"xxxxxxxxxxxxxxx", 
        //     polFilePubdTime:"aaaa", 
        //     memo:"aaaa",
        //   }
        // ],
        // totalDataCount: 71,
      },
    };
  },
  filters: {
    // table列的内容每16个字符换行
    filterRow16(str) {
      var newstr = "";
      for (let i = 0; i <= 1; i++) {
        newstr = newstr + str.slice(0, 16) + "\n";
        str = str.slice(16);
        if (str) {
          i = 0;
        } else {
          i = 2;
        }
      }
      return newstr;
    },
  },
  // watch: {
  //   jumpPage:{
  //     handler(newPage){
  //       const val = Number(newPage)
  //       if(val) {
  //         this.jumpPage = val;
  //       } else {
  //         this.jumpPage = ""
  //       }
  //     }
  //   }
  // },
  // computed: {
  //   startPage() {
  //     return (this.currentPage-1)*this.pageSize+1
  //   },
  //   endPage() {
  //     const curPage = this.currentPage*this.pageSize;
  //     const totalPage = this.tableData.totalDataCount;
  //     return curPage > totalPage ? totalPage : curPage
  //   }
  // },
  mounted() {
    this.searchDict();
    this.searchClick();
  },
  methods: {
    searchDict() {
      // 医保类型 有效标志
      treatmentServDict().then(res=>{
        this.medinsCat = res.data.medinsCat;
        this.valueFlag = res.data.valueFlag;
      }).catch(err=>{
        console.log(err);
      })
    },
    // 排序
    tableSortChange(val) {
      this.sort = val.order == "ascending"?val.prop+" " +"asc":val.order == "descending"?val.prop+" " +"desc":"";
      this.searchList();
    },
    // 重置
    resetClick() {
      this.formData= {
        itemCode: "",
        pricCode: "",
        itemName: "",
        pubTime: "",
        startPric: "",
        endPric: "",
        medinscat: "",
        valiFlag: "",
      },
      this.sort = "";
    },
    searchClick() {
      // 表单验证
      this.$refs.validateForm.validate((valid) => {
        if (valid) {
          // 验证成成功
          // this.jumpPage = 1;
          this.currentPage = 1;
          const searchData = {
            ...this.formData,
            startTime: this.formData.pubTime?this.formData.pubTime[0]:"",
            endTime: this.formData.pubTime?this.formData.pubTime[1]:"",
            startPric: this.formData.startPric?Number(this.formData.startPric):"",
            endPric: this.formData.endPric?Number(this.formData.endPric):""
          }
          delete searchData.pubTime;
          this.searchData = JSON.parse(JSON.stringify(searchData))
          this.searchList();
        } else {
          // 验证失败
          return;
        }
      })
    },
    searchList() {
      this.loading = true; //加载中。。。
      const params = {
        ...this.searchData,
        pagenum: this.currentPage,
        pagecount: this.pageSize,
        sort: this.sort
      }
      // console.log("111111",params);
      treatmentServList(params).then(res=>{
        // console.log("ssssssssssssssss",res);
        this.tableData = res.data;
        this.loading = false;
      }).catch(err=>{
        console.log(err);
      })
    },
    // 页码-每页**条
    handleSizeChange(val) {
      this.pageSize = val;
      // this.jumpPage = 1;
      this.currentPage = 1;
      this.searchList();
    },
    // 页码-当前**页
    handleCurrentChange(val) {
      // this.jumpPage = val;
      this.currentPage = val;
      this.searchList();
    },
    // 跳转页码-失去焦点的时候发送请求
    // blurJumpPage() {
    //   if(this.jumpPage) {
    //     let maxPage = Math.ceil(this.tableData.totalDataCount/this.pageSize);
    //     if(this.jumpPage <= maxPage) {
    //       this.currentPage = this.jumpPage;
    //     } else {
    //       this.jumpPage = maxPage;
    //       this.currentPage = maxPage;
    //     }
    //     this.searchList();
    //   } else {
    //     this.jumpPage = this.currentPage;
    //   }
    // },
    operationRow(rowId) {
      console.log("rrrrrrrrrr",rowId);

    },
    exportClick() {
      console.log("导出。。。。。");
    }
  },
};
</script>

<style lang="less" scoped>
@import url("@/assets/common/global_deep_style.less");

.medical-services {
  min-width: 1134px;
  background: #f5f7fa;
  margin: 16px;
  .search {
    background: #fff;
    box-sizing: border-box;
    position: relative;
    padding-top: 16px;
    .line {
      display: flex;
      justify-content: space-between;
    }
    .content-pric {
      font-size: 13px;
      color: #B0B4BD;
      ::v-deep .el-input {
        width: 79px;
        .el-input__inner {
          width: 79px;
          padding-right: 16px;
        }
      }
    }
    .confirm-reset {
      // position: absolute;
      // height: 40px;
      // bottom: 0;
      // right: 0;
      // ::v-deep .el-form-item__content {
      //   top: 50%;
      //   transform: translateY(-50%);
      // }
      .reset {
        float: left;
      }
      .confirm {
        margin-right: 0 !important;
      }
    }
  }
  .table-list {
    margin-top: 12px;
    padding-bottom: 20px;
    border-radius: 4px;
    background: #fff;
    .title-content {
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-right: 20px;
      .title {
        height: 16px;
        margin-left: 10px;
        font-family: "PingFangSC-Semibold";
        font-size: 16px;
        color: #303133;
        letter-spacing: 0;
        line-height: 16px;
        font-weight: bold;
        &::before {
          content: "";
          width: 4px;
          height: 14px;
          background: #0160c0;
          float: left;
          margin-top: 1px;
          margin-right: 4px;
        }
      }
      .export {
        margin-right: 0;
      }
    }
    .table-content {
      padding: 0 20px;
      box-sizing: border-box;
    }
    // .pagination-content {
    //   padding: 0 20px;
    //   box-sizing: border-box;
    //   height: 40px;
    //   margin-top: 10px;
    //   font-family: PingFangSC-Regular;
    //   font-size: 13px;
    //   color: #303133;
    //   letter-spacing: 0;
    //   line-height: 13px;
    //   display: flex;
    //   align-items: center;
    //   justify-content: space-between;
    //   overflow: hidden;
    //   .page {
    //     display: flex;
    //     align-items: center;
    //     ::v-deep .el-pagination {
    //       display: inline-block;
    //       .el-input__inner {
    //         width: 100%;
    //         height: 100%;
    //         font-size: 13px;
    //       }
    //       .el-input {
    //         height: 24px;
    //       }
    //       .el-input__suffix {
    //         right: 6px;
    //       }
    //       .el-pager {
    //         li {
    //           height: 24px;
    //           line-height: 24px;
    //           margin-right: 20px;
    //           min-width: unset;
    //           color: #303133;
    //           font-weight: normal;
    //         }
    //         li:last-child {
    //           margin-right: 6px;
    //         }
    //         .active {
    //           width: 24px;
    //           height: 24px;
    //           background: #0160C0;
    //           border-radius: 2px;
    //           color: #fff;
    //         }
    //       }
    //       .btn-prev,.btn-next {
    //         width: 24px;
    //         height: 24px;
    //         min-width: unset;
    //         margin-right: 6px;
    //         border: 1px solid #DCDFE6;
    //         border-radius: 2px;
    //       }
    //       .btn-next {
    //         padding-left: 6px;
    //       }
    //     }
    //     input {
    //       width: 60px;
    //       height: 24px;
    //       border: 1px solid #DCDFE6;
    //       outline: none;
    //       border-radius: 2px;
    //       text-align: center;
    //       &:focus {
    //         border: 1px solid #0160C0;
    //       }
    //     }
    //   }
    // }
  }
}
</style>